<template>
  <!--二级菜单-->
  <!-- 此处的index如果不写，会导致展开某项菜单时，其他菜单也会全部展开 -->
  <el-sub-menu
    :index="data.path" 
    v-if="data && data.children && data.children.length > 0"
  >
    <template #title>
      <el-icon>
        <component :is="data.meta.icon"></component>
      </el-icon>
      <span>{{ data.name }}</span>
    </template>

    <sildeMenuItem
      v-for="(child, index) in data.children"
      :key="child.id"
      :data="child"
    ></sildeMenuItem>
  </el-sub-menu>
  
  <el-menu-item :index="data.path" v-else>
    <template #title>
      <el-icon>
        <component :is="data.meta.icon"></component>
      </el-icon>
      <span>{{ data.name }}</span>
    </template>
  </el-menu-item>
</template>
<script setup>
const props = defineProps({
    data:Object 
})
</script>
